<template>
    <div style="text-align: center;">
        <Page 
            :total="value.total" :current="value.current_page" :page-size="value.page_size" 
            size="small" show-elevator show-sizer show-total
            @on-change="handleChange" @on-page-size-change="handlePageSizeChange"
        ></Page>
    </div>
</template>

<script>
import Page from '@/common/model/Page'

export default {
    name: "AutoPage",
    props: {
        value: {
            type: Page
        },
        auto: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleChange(current_page) {
            this.value.current_page = current_page;
            this.getData();
        },
        handlePageSizeChange(page_size) {
            this.value.page_size = page_size;
            this.value.current_page = 1;
            this.getData();
        },
        getData() {
            this.value.getData();
        }
    },
    created() {
        if(this.auto) this.getData();
    }
};
</script>